import { CockpitChartBaseProps } from "../helps";
import React from "react";

export interface KxWorkerSexPieChart extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";

export const getKxWorkerSexPieChartOption = ({
  dataSource = [],
  img,
}: KxWorkerSexPieChart): EChartsOption => {
  const color = ["#2CFFFF", "#9952FF"];
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);
  return {
    color,
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 180,
            height: 180,
          },
          left: "center",
          top: "center",
        },
      ],
    },
    tooltip: {
      show: false,
    },
    toolbox: {
      show: false,
    },
    title: [
      {
        // text: '{val|' + total + '}\n{name|总工人数}',
        text: "{val|" + 3115 + "}\n{name|总工人数}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 24,
              color: "#FDFFFF",
              padding: [10, 0],
            },
            val: {
              fontSize: 24,
              fontFamily: "Arial",
              color: "#FDFFFF",
            },
          },
        },
      },
    ],
    series: [
      {
        name: "",
        type: "pie",
        clockwise: false,
        radius: [100, 102],
        label: {
          show: true,
          fontSize: 18,
          color: "#FDFFFF",
          fontFamily: "Arial",
          formatter(params: any) {
            const percent = ((params.value / total) * 100).toFixed(0);
            // return params.name ? params.name + '\n' + params.value + '/' + percent + '%' : '';
            return params.name ? params.name + "\n" + percent + "%" : "";
          },
        },
        labelLine: {
          length: 10,
          show: true,
        },

        data: dataSource.reduce<any[]>((memo, cur, currentIndex) => {
          memo.push(
            {
              value: cur.amount || 0,
              name: cur.name,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  shadowBlur: 20,
                  borderColor: color[currentIndex],
                  shadowColor: color[currentIndex],
                },
              },
            },
            {
              value: (cur.amount || 0) / 10,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            }
          );
          return memo;
        }, []),
      },
    ],
  };
};

const KxWorkerSexPieChart = ({
  reactEChartsProps,
  dataSource,
  img,
}: KxWorkerSexPieChart) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "313px",
      }}
      option={getKxWorkerSexPieChartOption({
        dataSource,
        img,
      })}
    />
  );
};

export default KxWorkerSexPieChart;
